<ion-content>
  <div *ngIf="flag" class="contain1">
    <ion-card *ngFor="let item of orderlist, let i = index">
      <ion-item>
        <ion-avatar item-start>
          <img src="{{picrooturl}}{{item.shop_logo}}">
        </ion-avatar>
        <h2 class="tou">
          <span class="avatar-detail" *ngIf="item.order_status == 2">未使用</span>
          <span class="shopName">{{item.shop_name}}</span>
        </h2>
      </ion-item>
      <ion-grid>
        <ion-row>
          <ion-col col-4>
            <img src="{{picrooturl}}{{item.service_info.imgs}}" class="goodPic">
          </ion-col>
          <ion-col col-5 class="mydetail">
            <h4 class="serviceName">{{item.service_info.service_name}}</h4>
            <p class="orderCount">数量X{{item.order_count}}</p>
            <p class="marketPrice">￥{{item.service_info.market_price}}</p>
            <!--<span>￥{{item.order_price}}</span>￥{{item.service_info.market_price}}</p>-->
          </ion-col>
          <ion-col col-3 class="price">
            <p class="service">服务</p>
            <p class="servicePrice">￥{{item.service_info.service_price}}</p>
          </ion-col>
          <!--<ion-col col-4>
            <button ion-button  outline  *ngIf="item.order_status == 1">去支付</button>
            <button ion-button  outline  *ngIf="item.order_status == 4">确认收货</button>
            <button ion-button  outline  *ngIf="item.order_status == 6">去评价</button>
          </ion-col>-->
        </ion-row>
        <ion-row class="shopInfo">
          <ion-col col-9>
            <img src="assets/img/Comment/dingwei@2x.png" alt="" class="shopLogo">
            <span class="shopLength">{{item.shop_address}}</span>
          </ion-col>
          <ion-col col-3 class="phoneCall2">
            <div class="border">
              <a href="tel:{{item.shop_tel}}">
                <img src="assets/img/Comment/call@2x.png" alt="" class="shopPhone">
              </a>
            </div>
          </ion-col>
        </ion-row>
        <!-- <<<<<<< .mine -->
        <ion-row>
          <ion-col class="noPadding">
            <button class="refund" (tap)="refund(item)">退款</button>
            <button class="checkQ" (tap)="seeTicket(item)">查看券码</button>
          </ion-col>
        </ion-row>
        <!-- ||||||| .r481 -->
        <!-- =======
        <ion-row>
          <ion-col class="noPadding">
            <button class="refund" (tap)="refund(item,i)">退款</button>
            <button class="checkQ" (tap)="seeTicket(item)">查看券码</button>
          </ion-col>
        </ion-row>
>>>>>>> .r490 -->
      </ion-grid>
    </ion-card>
    <p *ngIf="bottom1" class="bot">已经加载全部啦 ~</p>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content loadingText="正在加载..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
  <div class="dataNull" *ngIf="showDataNull">
    <span class="blank" *ngIf="!flag">
      <img src="assets/img/Comment/dingdankong@2x.png" alt="">
      <span>您还没有相关订单哟</span>
    </span>
   <div style="margin-top:1rem;">
      <p text-center style="position:relative;color:red;margin:0;">
          <span>———— </span>
          <span style="display:inline-block;width:2.5rem;height:2.5rem;position: absolute;top: -0.3rem;">
            <img style="width:100%;height:100%;" src="assets/img/tuijianxihuan@2x.png" alt="">
          </span>
           <span style="margin-left:3.5rem;font-size:1.6rem"> 您可能喜欢 </span> 
           <span> ————</span></p>
        <ion-list>
          <ion-row class="recommends">
            <ion-col col-6  *ngFor="let shop of recommend" (tap)="toShopInfo(shop.id,shop.shop_id)">
              <ion-card id="reconmend_list" style="border-radius: 5px;border-bottom:none;">
                <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width:100%;height:100%"> -->
                <div style="width:100%;height:13rem;">
                  <img src="{{picrooturl}}{{shop.imgs}}" style="width:100%;height:100%">
                </div>
                <div class="text2">
                  <p class="clearfix">
                    <span style="float:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 50%;">{{shop.service_name }}</span>
                    <span style="float:right;color:red">￥{{shop.service_price}}</span>
                  </p>
                </div>
              </ion-card>
            </ion-col>
          </ion-row>
        </ion-list>
   </div>
  </div>

</ion-content>